<template>
  <div>
    <div class="content">
      <div class="index_hot">
        <div class="index_hot_menu">
          <span @click="sortBtn(0)" :class="{ active: bgactive == 0 }"
            >综合排序</span
          >
          <span @click="sortBtn(1)" :class="{ active: bgactive == 1 }"
            >价格由低到高</span
          >
          <span @click="sortBtn(2)" :class="{ active: bgactive == 2 }"
            >价格由高到底</span
          >
          <em>
            <input type="text" placeholder="请输入最小值" v-model="priceGt" /> -
            <input type="text" placeholder="请输入最大值" v-model="priceLte" />
            <input type="button" value="价格筛选" @click="priceBtn" />
          </em>
        </div>
        <div class="index_hot_main">
          <ul>
            <li v-for="(item, i) in proList" :key="i">
              <!-- <img
                :src="item.productImageUrl"
                @click="linkBtn(item.productId)"
              /> -->
              <img
                src="../assets/images/p1.jpg"
                @click="linkBtn(item.productId)"
              />
              <p>
                {{ item.productName }}
                <br />
                {{ item.salePrice }}元
              </p>
            </li>
          </ul>
          <div style="display: flex; justify-content: center">
            <el-pagination
              v-model="page"
              :page-sizes="[3, 6, 9, 12]"
              :page-size="size"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            ></el-pagination>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
  <script>
export default {
  data() {
    return {
      proList: [],
      page: 1,
      size: 6,
      sort: "",
      priceGt: null,
      priceLte: null,
      bgactive: 0,
      total: null,
    };
  },
  methods: {
    getProList() {
      this.$axios
        .get(
          `http://api.mm2018.com:8095/api/goods/allGoods?page=${this.page}&size=${this.size}&sort=${this.sort}&priceGt=${this.priceGt}&priceLte=${this.priceLte}`
        )
        .then((res) => {
          console.log(res.data);
          this.proList = res.data.data;
          this.total = res.data.total;
        });
    },

    sortBtn(i) {
      if (i == 0) {
        //综合排序
        this.sort = "";
        this.bgactive = 0;
        this.getProList();
      }
      if (i == 1) {
        //价格由低到高
        this.sort = 1;
        this.bgactive = 1;
        this.getProList();
      }
      if (i == 2) {
        //价格由高到底
        this.sort = -1;
        this.bgactive = 2;
        this.getProList();
      }
    },

    handleSizeChange(val) {
      this.size = val;
      this.getProList();
    },

    handleCurrentChange(val) {
      this.page = val;
      this.getProList();
    },
    //价格范围筛选
    priceBtn() {
      if (this.priceLte > this.priceGt) {
        this.getProList();
      }
    },
    //跳转到详情页面
    linkBtn(pid) {
      this.$router.push({
        path: `/proDtail?productid=${pid}`,
      });
    },
  },

  created() {
    this.getProList();
  },
};
</script>
<style scoped>
.active {
  color: black;
}

.content {
  width: 1140px;
  height: auto;
  margin: 0 auto;
  overflow: hidden;
}

ul {
  margin: 0px;
  padding: 0px;
  list-style-type: none;
}

.index_hot {
  width: 100%;
}

.index_hot_menu {
  width: 100%;
  height: 40px;
  background: #348408;
  margin-top: 50px;
  line-height: 40px;
  color: #fff;
  text-indent: 20px;
}

.index_hot_menu span {
  padding-right: 25px;
}

.index_hot_main {
  width: 100%;
}

.index_hot_main ul {
  display: flex;
  flex-flow: wrap;
  justify-content: space-between;
  padding-top: 50px;
}

.index_hot_main ul li {
  width: 360px;
  margin-bottom: 30px;
}

.index_hot_main ul li img {
  width: 360px;
  height: 268px;
}

.index_hot_main ul li p {
  text-align: center;
  line-height: 30px;
  margin: 0px;
  padding: 0px;
  padding-top: 20px;
}

.index_productlist {
  width: 100%;
  height: auto;
  padding-top: 50px;
  overflow: hidden;
}

.index_productlist_left {
  width: 545px;
  height: auto;
  float: left;
}

.index_productlist_left img {
  display: block;
  width: 545px;
  height: 400px;
}

.index_productlist_right {
  width: 585px;
  float: right;
}

.index_productlist_right ul {
  display: flex;
  justify-content: space-around;
  flex-flow: wrap;
}

.index_productlist_right ul li {
  width: 275px;
  height: 190px;
  overflow: hidden;
  margin-bottom: 20px;
}

.index_productlist_right ul li img {
  width: 275px;
  height: 190px;
  display: block;
}
</style>